<template>
	<view>
		<view class="user-header">
			<image :src="userInfo.avatar" mode="" />
			<view class="user-header-box">
				<view class="user-header-nickname">{{userInfo.nickname || ""}}</view>
				<view class="user-header-bottom">
					<view class="user-header-righ-count">剩余本数 <text>{{userInfo.remaining_book}}</text></view>
					<image @tap="setting" src="../static/set.png" mode="widthFix" class="set"></image>
				</view>
			</view>

			<view class="cz_txt" @tap="recharge">去充值</view>

		</view>
		<view class="user-body">
			<view class="user-body-info">
				<view>我的绘本 共{{bookCount}}本</view>
				<view @click="handleClick" v-if="!selectShow">选择</view>
				<view @click="handleClick" v-if="selectShow">取消</view>
			</view>
			<view class="user-body-list">
				<view class="user-body-item" v-for="(item, index) in dataList" :key="index">
					<image src="../static/file.png" mode="" @click="handleFileClick(index,item)" />
					<view class="user-body-item-title" @click="showMak(index)">{{ item.folder_name }}</view>
					<view class="user-body-item-select" :class="{
                            'user-body-item-select-active': selectList[index],
                        }" v-if="selectShow">
						√
					</view>
				</view>
			</view>
		</view>

		<view class="user-btn" v-if="selectShow">
			<view @click="toChooseAddress">打印</view>
			<view @click="del">删除</view>
		</view>
		<u-mask :show="maskShow" @click="maskShow = false">
			<view class="mask">
				<view class="mask-box" @tap.stop>
					<view class="mask-input">
						<input type="text" placeholder="请输入新的文件夹名称" v-model="maskInputValue" />
					</view>
					<view class="mask-btn">
						<view @click="closeMask">取消</view>
						<view @click="confirmMask">确认</view>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import NavBar from "components/NavBar";
	export default {
		components: {
			NavBar,
		},
		data() {
			return {
				// 绘本列表
				dataList: [

				],
				selectShow: false,
				selectList: [],
				maskShow: false,
				currentFileIndex: 0,
				maskInputValue: "",
				// 用户信息
				userInfo: {},
				// 绘本数量
				bookCount: 0,
			};
		},
		onLoad() {

		},
		onShow: function() {
			this.getUserInfo();
		},
		methods: {
			del() {
				var that = this
				var allarr = []
				uni.showLoading({
					title:'删除中...'
				})
				for(let u = 0; u<this.selectList.length;u++){
					allarr.push(that.$u.post("del_folder", {folder_id:that.dataList[u].id}))
				}
				Promise.all(allarr).then(res=>{
					this.getUserInfo()
					this.handleClick()
				})
			},
			recharge(e) {
				uni.navigateTo({
					url: "/pages/recharge"
				})
			},
			setting(e) {
				uni.navigateTo({
					url: "/pages/setting/setting"
				})
			},
			handleClick() {
				this.selectShow = !this.selectShow;
				this.selectList = new Array(this.dataList.length).fill(false);
				if (this.selectShow) {
					uni.hideTabBar();
				} else {
					uni.showTabBar();
				}
			},
			handleSelect(index) {
				let arr = Array.from(this.selectList);
				arr[index] = !arr[index];
				this.selectList = arr;
			},
			toBookDetail(index, item) {
				uni.navigateTo({
					url: "/pages/bookDetail?id=" + item.id + "&books_id=" + item.books_id,
				});
			},
			handleFileClick(index, item) {
				if (!this.selectShow) {
					this.toBookDetail(index, item);
				} else {
					this.handleSelect(index, item);
				}
			},
			showMak(index) {
				if (!this.selectShow) {
					this.maskShow = true;
					this.currentFileIndex = index;
				}
			},
			closeMask() {
				this.maskShow = false;
			},
			confirmMask() {
				this.dataList[this.currentFileIndex].title = this.maskInputValue;
				this.maskInputValue = "";
				this.closeMask();
			},
			toChooseAddress() {
				uni.switchTab({
					url: "/pages/chooseAddress",
				});
			},

			getUserInfo() {
				this.$u.post("my_show").then((res) => {
					uni.setStorageSync('user_info',res.data.user_info)
					this.userInfo = res.data.user_info;
					this.dataList = res.data.folder_info.data;
					this.bookCount = res.data.folder_info.count;
				});
			},
		},
	};
</script>

<style scoped>
	.cz_txt {
		width: 92%;
		height: 45px;
		display: table;
		position: absolute;
		left: 4%;
		bottom: 0px;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		background: linear-gradient(to right, #ffe8bc, #f9ce77);
		box-sizing: border-box;
		line-height: 45px;
		font-size: 16px;
		font-weight: bold;
		color: #674a2b;
		padding: 0px 20px;
	}

	.set {
		width: 30px !important;
		height: auto;
		display: table;
		position: absolute;
		top: 50%;
		right: 0px;
		margin-top: -15px;
	}

	page {
		background-color: #fdfdf0;
	}

	body {
		position: absolute;
	}

	.user-header {
		padding: 80rpx 40rpx;
		box-sizing: border-box;
		background: linear-gradient(to right, #9ce683, #51d326);
		display: flex;
		align-items: center;
		padding-bottom: 70px;
		position: relative;
	}

	.user-header image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	.user-header-box {
		width: 80%;
		height: 120rpx;
		display: inline-block;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 40rpx;
		position: relative;
	}

	.user-header-nickname {
		font-size: 36rpx;
		color: #fff;
		margin-top: 7px;
	}

	.user-header-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #e4f8dd;
	}

	.user-header-righ-count text {
		color: #e4f8dd;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.user-header-righ-btn {
		width: 120rpx;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		box-sizing: content-box;
		border-radius: 10rpx;
		background-color: #ff6600;
		border: 4rpx solid #fff;
		color: #fff;
	}

	.user-body {
		box-sizing: border-box;
		padding: 10px 4%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		min-height: 60vh;
		margin-bottom: 100rpx;
	}

	.user-body-info {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		/* border-bottom: 2rpx solid #999; */
		font-size: 32rpx;
	}

	.user-body-info>view:nth-child(1) {
		color: #555555;
	}

	.user-body-info>view:nth-child(2) {
		color: #555555;
		box-sizing: border-box;
		padding-right: 20px;
		background: url(../static/rj_icon.jpg)no-repeat;
		background-size: 11px auto;
		background-position: right center;
	}

	.user-body-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.user-body-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		align-items: center;
	}

	.user-body-item image {
		height: 165rpx;
		width: 165rpx;
	}

	.user-body-item-title {
		text-align: center;
	}

	.user-body-item-select {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		bottom: 18px;
		right: 21px;
		border: 1px solid #fff;
		text-align: center;
		line-height: 40rpx;
		color: rgba(0, 0, 0, 0);
		font-size: 36rpx;
	}

	.user-body-item-select-active {
		border: 1px solid #ededed;
		background-color: #fff;
		color: red;
	}

	.user-btn {
		position: fixed;
		bottom: 0rpx;
		width: 750rpx;
		height: 100rpx;
		background-color: #92d14f;
		display: flex;
	}

	.user-btn view {
		width: 50%;
		color: #fff;
		text-align: center;
		line-height: 100rpx;
	}

	.mask {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.mask-box {
		width: 70%;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	.mask-input {
		margin-top: 40rpx;
	}

	.mask-btn {
		margin: 40rpx 0;
		display: flex;
		width: 100%;
		justify-content: space-around;
	}
</style>
